{% set locale = localeInfo.lang %}
{% set localeDir = localeInfo.locale %}
<!DOCTYPE html>
<html lang="{{ locale }}" dir="{{ localeInfo.direction }}">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <!-- Start prefetching the largest of the editor resources -->
    <link rel="prefetch" href="{{ editorHOST }}/dist/index.html">
    <link rel="prefetch" href="{{ editorHOST }}/dist/bramble.js">
    <link rel="prefetch" href="{{ editorHOST }}/dist/styles/brackets.min.css">
    <link rel="prefetch" href="{{ editorHOST }}/dist/thirdparty/thirdparty.min.js">
    <link rel="prefetch" href="{{ editorHOST }}/dist/main.js">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@codewiththimble">
    <meta name="twitter:creator" content="@codewiththimble">
    <meta name="twitter:title" content="{{ gettext("thimbleHeading") | striptags }}">
    <meta name="twitter:description" content="{{ gettext("thimbleDescription1") | striptags }}">
    <meta name="twitter:image" content="{{ APP_HOSTNAME }}/img/social.png">

    <meta property="og:url" content="{{ APP_HOSTNAME }}/{{ locale }}/">
    <meta property="og:type" content="website">
    <meta property="og:title" content="{{ gettext("thimbleHeading") | striptags }}">
    <meta property="og:description" content="{{ gettext("thimbleDescription1") | striptags }}">
    <meta property="og:image" content="{{ APP_HOSTNAME }}/img/social.png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">

    <link rel="stylesheet" href="/resources/stylesheets/userbar.css">
    <link rel="stylesheet" href="/homepage/stylesheets/style.css">

    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Arvo:400,600,700,800,900" rel="stylesheet">

    <title>{% block pagetitle %}{% endblock %}</title>

    <script src="/locales/{{ localeDir }}/strings.js"></script>

    {% if GA_ACCOUNT %}
    <script id="google-analytics-js" src="/resources/scripts/google-analytics.js"
            data-ga-account="{{ GA_ACCOUNT }}"
            data-ga-domain="{{ GA_DOMAIN }}"
            async>
    </script>
    {% endif %}
  </head>

  <body data-locale="{{ localeDir }}">

    {% if glitchExportEnabled %}
      {% include './glitch-notice.html' %}
    {% endif %}

    <div class="feature-section">
      {% include './userbar.html' %}

      <script src="https://pontoon.mozilla.org/pontoon.js"></script>

      <script id="homepage-script" src="/homepage/scripts/main.js"></script>

      {% block top %}{% endblock %}
    </div>

    {% block content %}{% endblock %}
  </div>

    {% include '../footer.html' %}
  </body>
</html>
